<template>
  <div>
    <div class="data">
      <el-form :inline="true" :moodel="params" style="margin-left: 10px">
        <el-form-item label="标题">
          <el-input v-model="params.title" placeholder="按标题查找" class="select">
          </el-input>
        </el-form-item>
        <el-form-item style="margin-left: 33px; margin-top: 15px">
          <el-button icon="el-icon-search" type="primary" @click="getList(1)">查询</el-button>
          <el-button icon="el-icon-plus" type="success" @click="add">新增</el-button>
          <el-button icon="el-icon-delete" type="danger" @click="removeMore">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="rows" stripe style="width: 100%" @selection-change="SelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="img" label="图片" width="180">
          <template slot-scope="scope">
            <img style="width: 40px; height: 40px;" v-if="scope.row.img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="url" label="跳转地址" width="200"></el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#aaaaaa"
              @change="statusChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <!-- <span v-if="scope.row.status == 1">是</span>
            <span v-else>否</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" style="margin-right:15px" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
            title="确定删除此数据吗？"
            @confirm="remove(scope.row)"
            >
            <el-button icon="el-icon-delete" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChange"
        @current-change="getList"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 20, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :title="form._id ? '编辑' : '新增'" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="图片" prop="img">
          <upload
            action="/upload"
            :cicle="false"
            :width="300"
            :height="300"
            :on-success="onSuccess">
            <img style="max-width: 100%; max-height: 100%;" v-if="form.img" :src="form.img" />
            <div v-else style="border:1px dashed #e4e4e4;width:100px;height:100px;line-height:100px;text-align:center;"><i class="el-icon-plus avatar-uploader-icon"></i></div>
          </upload>
          <!-- <div class="image" @click="openFile">
            <img style="max-width: 100%; max-height: 100%;" v-if="form.img" :src="form.img" />
            <span v-else>+</span>
          </div>
          <input style="display:none" ref="file" multiple accept="image/*" type="file" @change="changeFile"> -->
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input type="text" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="跳转地址" prop="url">
          <el-input type="text" v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="type in types"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import api from '@/api'
import Upload from '../../components/Upload.vue';
export default{
  name: "shouyeRecommend",
  components: {Upload},
  data() {
    return {
      //查询参数
      params: {
        title: '',
        type:'recomend',
        pageNum: 1,
        pageSize: 5,
      },
      rows: [],
      total: 0,
      dialogFormVisible: false,
      form: {
        _id: 0,
        img: '',
        title: '',
        url: '',
        type: ''
      },
      rules: {
        img: [
          { required: true, message: "图片不能为空", trigger: "blur" },
        ],
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" },
        ],
      },
      types: [
        {label:'轮播图',value:'banner'},
        {label:'分页区',value:'category'},
        {label:'为你推荐',value:'recomend'},
      ],
      selecteds:[]
    };
  },
  methods: {
    //获取列表
    getList(pageNum) {
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        url: '/admin/index',
        params: this.params,
      }).then((res) => {
        this.total = res.total;
        this.rows = res.rows;
      });
    },
    //启用 停用
    statusChange(row) {
      this.$http({
        url: '/admin/index',
        method: 'PUT',
        data: {
          indexId: row._id,
          status: row.status
        }
      }).then((res) => {
        if (res.errorMsg) {
          this.getList();
        }
      });
    },
    //修改pageSize
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;
      this.getList();
    },
    //新增
    add() {
      //初始化
      this.form = {
        _id: 0,
        img: '',
        title: '',
        url: '',
        type: ''
      }
      this.dialogFormVisible = true;
    },
    //修改
    edit(row){
      this.form = row
      this.dialogFormVisible = true;
    },
    //删除
    remove(row){
      this.$http({
        url: '/admin/index',
        method:'DELETE',
        params: {indexId:row._id},
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList(1)
        }
      })
    },
    SelectionChange(rows) {
      //存储选中的数据
      this.selecteds = rows;
    },
    //批量删除
    removeMore(){
      //获取选中的数据
      let checkedRowsPromise = []
      let success = [], fail = []
      for(let i = 0; i < this.selecteds.length; i ++){
        checkedRowsPromise.push(
          new Promise(resovle => {
            let row = this.selecteds[i]
            this.$http({
              url: '/admin/index',
              method:'DELETE',
              params: {indexId:row._id},
            }).then((res) => {
              if (!res.errorMsg) {
                success.push(row._id)
              }else{
                fail.push(row._id)
              }
              resovle()
            })
          })
        )
      }
      this.$confirm('此操作将删除选中的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除
        Promise.all(checkedRowsPromise).then(() => {
          this.$message({
            message:`批量删除完成，成功删除${success.length}条数据，删除失败${fail.length}条数据`,
            duration:3000
          });
          this.getList(1)
        })
      })
    },

    onSuccess(res){
      //拼装图片路径赋值给表单
      if(res.filename) this.form.img = api.baseURL + '/uploads/' + res.filename
    },
    sumbmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.indexId = this.form._id
          this.$http({
            url: '/admin/index',
            method:this.form.indexId ? 'PUT' : 'POST',//通过indexId判断是新增还是修改
            data: this.form,
          }).then((res) => {
            if (!res.errorMsg) {
              this.dialogFormVisible = false;
              this.getList(this.form.indexId ? undefined : 1);
            }
          })
        }
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style>
.select {
  width: 160px;
	height: 40px;
  font-size: 15px;
	color: #e9e9e9;
  margin-top: 14px;
}
.image{
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  text-align: center;
  line-height: 100px;
  font-size: 28px;
}
</style>